<template>
    <div>
        <BackHeader :title="title"></BackHeader>
        <div class="mainbox">
            <ul class="fanslist">
                <li v-for="(item, index) in userlist" :key="index">
                    <div class="userbox">
                        <img :src="item.img" alt="">
                        <p>
                            <span>{{ item.name }}</span><br>
                            <span>{{ item.content }}</span>
                        </p>
                    </div>
                    <div class="guanzhu">
                        <span :class="{ 'bgc': !item.attention }" @click="change(item.id)" id="gz">{{item.text}}</span>
                    </div>
                </li>
            </ul>
            <div class="dixian">
                -已显示全部-
            </div>
        </div>
    </div>
</template>

<script>
import BackHeader from '@/components/mycomponents_jk/BackHeader.vue';
export default {
    name: 'FansView',
    components: {
        BackHeader
    },
    data() {
        return {
            title: "粉丝",
            userlist: [
                {
                    name: "西瓜",
                    id: 1,
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%B2%89%E4%B8%9D_%E5%A5%BD%E5%8F%8B/%E8%92%99%E7%89%88_u4815.png",
                    content: "好好学习，天天向上",
                    attention: true,
                    text:"已关注"
                },
                {
                    name: "东瓜",
                    id: 2,
                    img: "https://cdn7.axureshop.com/demo/1182587/images/%E7%B2%89%E4%B8%9D_%E5%A5%BD%E5%8F%8B/%E8%92%99%E7%89%88_u4815.png",
                    content: "好好学习，天天向上,好好学习，天天向上,好好学习，天天向上",
                    attention: true,
                    text:"已关注"
                }
            ]
        };
    },

    mounted() {

    },

    methods: {
        // 识别id 更改关注状态
        change(id) {
            let findindex = this.userlist.findIndex(res => {
                return res.id == id
            })
            this.userlist[findindex].attention = !this.userlist[findindex].attention
            if (this.userlist[findindex].attention) {
                this.userlist[findindex].text="已关注"
            } else {
                this.userlist[findindex].text="关注"
            }
        }
    },
};
</script>

<style lang="less" scoped>
.mainbox {
    width: 100%;
    margin-top: 5rem;
    padding: 2rem;

    .fanslist {
        li {
            display: flex;
            height: 6rem;
            justify-content: space-between;

            .userbox {
                display: flex;
                align-items: center;

                img {
                    margin-right: 1rem;
                    width: 4.3rem;
                    height: 4.3rem;
                }

                p {
                    line-height: 2rem;
                    font-size: 1.2rem;
                    color: #999999;
                    max-width: 18rem;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    span:first-child {
                        font-size: 1.4rem;
                        color: #000;
                    }
                }
            }

            .guanzhu {
                display: flex;
                align-items: center;

                span {
                    display: inline-block;
                    width: 7rem;
                    height: 2.8rem;
                    font-size: 1.3rem;
                    text-align: center;
                    line-height: 2.8rem;
                    color: #fff;
                    background-color: #999999;
                    border-radius: 1.4rem;
                }

                .bgc {
                    background-color: #41C872;
                }
            }
        }
    }
    .dixian{
        margin-top: 2rem;
        line-height: 3rem;
        text-align: center;
        color: #CCCCCC;
        font-size: 1.2rem;
    }
}
</style>